<template>
  <div id="loginBar">
    <h1>登录</h1>
    <el-form ref="loginFormRef" :rules="loginFormRules" :model="form" class="form">
      <el-form-item class="formItem" prop="mail">
        <el-input v-model="form.mail" placeholder="请输入管理员邮箱" clearable></el-input>
      </el-form-item>
      <el-form-item class="formItem" prop="password">
        <el-input v-model="form.password" placeholder="请输入密码" show-password></el-input>
      </el-form-item>
      <el-form-item class="formItem">
        <el-button type="primary" @click="login" @keydown.enter="login">登录</el-button>
      </el-form-item>
    </el-form>
    <div id="toMailCheck" @click="toMailCheck">验证码登录</div>
  </div>
</template>

<script setup>
import Cookies from 'js-cookie'
import { ref, reactive, onMounted, onUnmounted ,getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
import { useRouter } from "vue-router"
const router = useRouter()
import { ElNotification, ElMessageBox } from 'element-plus'

// 登录数据
const form = reactive({
  mail: null,
  password: null,
})
const loginFormRules = ref({
  mail: [{ required: true, message: '请输入管理员邮箱', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
})
const loginFormRef = ref() // 表单对象
// 登录事件
const login = async () => {
  await loginFormRef.value.validate((valid) => {
    if (valid && canLogin.value) {
      // 发送登录请求
      let data = {
          mail: form.mail,
          password: form.password
      }
    canLogin.value = false // 关阀
      proxy.$api.adminLogin(data)
      .then(res => {
        if (res.status) { // 登录认证成功
          Cookies.set('token', res.token, { expires: 1 }) // 将token存入cookie
          ElMessageBox.alert('点击确定进入后台', "登录成功", {
            type: 'success',
            confirmButtonText: 'OK',
            callback: () => {
              router.push({
                path: '/'
              }) // 跳转到首页
            }
          })
        } else {
          ElNotification({
            title: '登录失败,' + res.msg,
            type: 'error'
          })
        }
      })
    } else {
      ElNotification({
        title: !canLogin.value ? '登录过于频繁，请稍候' : '请完善信息后再登录',
        type: 'error'
      })
    }
  })

}
// 跳转到验证码登录页
const toMailCheck = () => {
  router.push({
    path: '/mailCheck'
  })
}
let canLogin = ref(true) // 节流阀，3秒一次登录接口
// 案件事件回调
const keyDownCallBack = (e) => {
  if (e.key === 'Enter' && canLogin.value) { // 回车登录
    e.preventDefault();
    setTimeout(() => canLogin.value=true,3000)
    return login()
  }
}
onMounted(() => {
  // 添加enter的登录监听事件
  document.addEventListener('keydown', keyDownCallBack, true)
})
onUnmounted(() => {
  // 解除enter的登录监听绑定
  document.removeEventListener('keydown', keyDownCallBack, true)
})
</script>

<style lang="scss" scoped>
#loginBar {
  width: 30%;
  max-height: 30%;
  min-height: 20rem;
  min-width: 10rem;
  border: 1px solid black;
  border-radius: 20px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: flex;
  flex-direction: column;
}

h1 {
  flex: 1;
  width: 100%;
  font-size: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

#toMailCheck {
  position: absolute;
  bottom: -2rem;
  right: 2.2rem;
  font-size: 1.5rem;
  cursor: pointer;
}
</style>
<style scoped>
/deep/.form {
  flex: 3;
  display: flex;
  flex-direction: column;
}

/deep/.formItem {
  flex: 1;
  width: 80%;
  margin: 0 auto;
}

/deep/.el-button {
  margin: 0 auto;
  display: block;
}
</style>